<template>
    <div class="decoration-pc min-w-[1100px]">
        <el-card shadow="never" class="!border-none">
            <el-row style="margin:20px 0">
                <el-col :span="8">
                    <div class="label">产品名称</div>
                    <div class="val">{{ state.data.product_name }}</div>
                </el-col>
                <el-col :span="8">
                    <div class="label">产品价格</div>
                    <div class="val">{{ state.data.product_price }}</div>
                </el-col>
                <el-col :span="8">
                    <div class="label">产品状态</div>
                    <div class="val">
                        <el-tag class="ml-2" :type="state.data.status ? 'primary' : 'danger'">
                            {{ state.data.status_desc }}
                        </el-tag>
                    </div>
                </el-col>
            </el-row>
            <el-row style="margin:20px 0">
                <el-col :span="8">
                    <div class="label">创建时间</div>
                    <div class="val">{{ state.data.create_time }}</div>
                </el-col>
            </el-row>

            <el-row style="margin:20px 0">
                <el-col :span="24">
                    <div class="label">销售政策</div>
                    <div class="val">{{ state.data.sales_policy }}</div>
                </el-col>
            </el-row>
            <el-row style="margin:20px 0">
                <el-col :span="24">
                    <div class="label">产品图片</div>
                    <image-contain
                    style="margin-bottom: 20px; margin-top: 14px;"
                            v-if="state.data.product_picture"
                            :src="state.data.product_picture"
                            :width="100"
                            :height="100"
                            :preview-src-list="[state.data.product_picture]"
                            preview-teleported
                            fit="contain"
                        />
                </el-col>
            </el-row>
            <el-row style="margin:20px 0">
                <el-col :span="24">
                    <div class="label">产品详情</div>
                    <div style="padding: 10px 0;" v-html="state.data.details"></div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="decorationPc">

import { porductDetail } from '@/api/porduct'
const route = useRoute()

const { id } = route.query
const state = reactive({
    data:''
})

const getDetail = async () => {
    const data = await porductDetail({
        id
    })
    state.data = data
}
getDetail()
</script>

<style scoped>

.label {
    color:#000;
    font-size: 14px;
}

.val {
    padding: 10px 0;
    color:#666;
    font-size: 14px;
}

</style>
